<template>
  <!-- 关联配置项 -->
  <div v-loading="loading">
    <ProTable
      ref="proTable"
      :columns="columns"
      :data="list"
      row-key="cino"
      :tool-button="false"
      :pagination="false"
      :height="list.length > 0 ? '' : 200"
    >
      <!-- 状态 -->
      <template #status="scope">
        <div v-if="scope.row.statusColor" :style="{ background: scope.row.statusColor }" style="color: #ffffff">
          {{ scope.row.status }}
        </div>
        <div v-else>{{ scope.row.status }}</div>
      </template>
    </ProTable>
  </div>
</template>
<script setup lang="ts" name="CostList">
import { ref, computed, watch } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { changeInfoNewPage } from "@/api/modules/changeManagement";
import { ciRelevanceList } from "@/api/modules/assetManagement";

const props = defineProps({
  eno: {
    type: Number || String
  },
  ciId: {
    type: Number || String
  }
});

const columns = computed(() => {
  let list = ref<any[]>([]);
  if (props.eno) {
    list.value = [
      { prop: "cino", label: "固定资产编号" },
      { prop: "ciname", label: "名称" },
      { prop: "categoryName", label: "分类" },
      { prop: "status", label: "状态", width: 150 }
      // { prop: "operation", label: "操作项", width: 300 }
    ];
  } else if (props.ciId) {
    list.value = [
      { prop: "ciId", label: "ID", width: 120 },
      { prop: "ciId", label: "正向关联" },
      { prop: "ciId", label: "反向关联" },
      { prop: "ciId", label: "配置项CI的关系类型" },
      { prop: "remark", label: "备注" }
    ];
  }
  return list.value;
});

const list = ref<any[]>([]);
const loading = ref(true);

const getList = () => {
  if (props.eno) {
    changeInfoNewPage({
      "queryDTO.eno": props.eno,
      random: new Date().getTime()
    })
      .then((res: any) => {
        list.value = res.cigDTO;
        loading.value = false;
      })
      .catch(() => {
        loading.value = false;
      });
  } else if (props.ciId) {
    ciRelevanceList(props.ciId, {
      _search: false,
      nd: new Date().getTime(),
      sidx: "relevanceId",
      sord: "desc",
      page: 1,
      rows: 15
    })
      .then((res: any) => {
        list.value = res.data || [];
        loading.value = false;
      })
      .catch(() => {
        loading.value = false;
      });
  } else {
    list.value = [];
  }
};

getList();

watch(
  () => props.eno,
  val => {
    getList();
  }
);

watch(
  () => props.ciId,
  val => {
    getList();
  }
);
</script>

<style lang="scss" scoped>
:deep(.card) {
  padding: 0;
  border: none;
}
</style>
